import { createStyles } from 'antd-style';

/**
 * Input 扩展样式 Hook
 * 
 * ⚠️ 此文件仅提供 ConfigProvider 主题系统无法实现的特殊交互效果
 * 
 * 基础样式（颜色、字体、间距、hover/active 状态等）请通过以下方式配置：
 * 1. 修改 DSL 文件 (Input.json)
 * 2. 更新主题配置 (themes/input.ts)
 * 3. 在应用根组件使用 ConfigProvider 应用主题
 * 
 * @example
 * ```tsx
 * const { styles } = useInputStyles();
 * <Input className={styles.mockHover}>模拟 hover 状态</Input>
 * <Input className={styles.mockFocus}>模拟 focus 状态</Input>
 * ```
 */
export const useInputStyles = createStyles(({ token, css }) => {
  return {
    /**
     * 基础增强样式 - 应用于所有 Input 组件
     */
    enhancedInput: css`
      /* 基础增强样式 - 应用于所有 Input 组件 */
    `,

    /**
     * 模拟 hover 状态 - 用于状态展示
     */
    mockHover: css`
      &.ant-input,
      &.ant-input-affix-wrapper {
        border-color: ${token.colorPrimaryHover};
      }
      
      &.ant-input-affix-wrapper-focused {
        border-color: ${token.colorPrimary};
      }
    `,

    /**
     * 模拟 focus 状态 - 用于状态展示
     */
    mockFocus: css`
      &.ant-input,
      &.ant-input-affix-wrapper {
        border-color: ${token.colorPrimary};
        box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
      }
    `,

    /**
     * 增强样式 - 添加过渡效果
     */
    enhanced: css`
      transition: all ${token.motionDurationMid};
      
      &:hover {
        border-color: ${token.colorPrimaryHover};
      }
      
      &:focus {
        border-color: ${token.colorPrimary};
        box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
      }
    `,
  };
});

